<template>
  <div class="study-view">
    <!-- 头部区域 -->
    <div class="study-header">
      <div class="header-content">
        <h1>学习资源中心</h1>
        <p>探索丰富的学习内容，提升自我</p>
        <!-- 搜索框 -->
        <div class="search-container">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="搜索课程、资料或技能..."
            class="search-input"
            @focus="showSearchSuggestions = true"
            @blur="handleSearchBlur"
            @input="handleSearchInput"
          />
          <button class="search-btn" @click="performSearch">
            <i class="fas fa-search"></i>
          </button>
          <!-- 搜索建议 -->
          <div v-if="showSearchSuggestions && filteredSuggestions.length > 0" class="search-suggestions">
            <div 
              v-for="(suggestion, index) in filteredSuggestions" 
              :key="index"
              class="suggestion-item"
              @mousedown="selectSuggestion(suggestion)"
            >
              {{ suggestion }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧筛选边栏 -->
      <aside class="sidebar">
        <!-- 分类筛选 -->
        <div class="filter-section">
          <h3>分类筛选</h3>
          <ul class="filter-list">
            <li 
              v-for="category in categories" 
              :key="category.id"
              :class="{ active: activeCategory === category.id }"
              @click="selectCategory(category.id)"
            >
              <span class="category-icon">{{ category.icon }}</span>
              <span class="category-name">{{ category.name }}</span>
              <span class="category-count">{{ category.count }}</span>
            </li>
          </ul>
        </div>
        
        <!-- 难度筛选 -->
        <div class="filter-section">
          <h3>难度级别</h3>
          <div class="difficulty-options">
            <label 
              v-for="level in difficultyLevels" 
              :key="level.value"
              class="difficulty-label"
            >
              <input 
                v-model="selectedDifficulties" 
                type="checkbox"
                :value="level.value"
                @change="updateFilteredResources"
              />
              <span class="difficulty-name">{{ level.name }}</span>
            </label>
          </div>
        </div>
        
        <!-- 学习时长筛选 -->
        <div class="filter-section">
          <h3>学习时长</h3>
          <div class="duration-slider">
            <input 
              v-model="durationFilter" 
              type="range" 
              min="0" 
              max="100"
              class="slider"
              @input="updateFilteredResources"
            />
            <div class="duration-labels">
              <span>0小时</span>
              <span>{{ durationFilter }}小时</span>
              <span>100+小时</span>
            </div>
          </div>
        </div>
        
        <!-- 重置筛选 -->
        <button class="reset-filters" @click="resetFilters">
          重置筛选条件
        </button>
      </aside>
      
      <!-- 右侧主要内容 -->
      <div class="content-area">
        <!-- 学习路径展示 -->
        <div v-if="activeCategory === 'all'" class="learning-paths">
          <h2>推荐学习路径</h2>
          <div class="path-list">
            <div 
              v-for="(path, index) in learningPaths" 
              :key="index"
              class="path-card"
              @click="navigateToPath(path.id)"
            >
              <div class="path-header">
                <div class="path-icon">{{ path.icon }}</div>
                <div class="path-info">
                  <h3>{{ path.title }}</h3>
                  <p>{{ path.courses }} 门课程 · {{ path.duration }} 小时学习</p>
                </div>
              </div>
              <div class="path-progress">
                <div 
                  class="progress-bar" 
                  :style="{ width: path.avgCompletion + '%' }"
                ></div>
              </div>
              <div class="path-stats">
                <span>{{ path.students }} 名学员</span>
                <span>{{ path.rating }} ⭐</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 我的学习进度 -->
        <div v-if="userProgress.length > 0" class="my-progress">
          <h2>继续学习</h2>
          <div class="progress-list">
            <div 
              v-for="(item, index) in userProgress" 
              :key="index"
              class="progress-item"
              @click="resumeLearning(item.id)"
            >
              <div class="progress-thumbnail">
                <img :src="item.thumbnail" :alt="item.title" />
                <div class="progress-overlay">{{ item.progress }}%</div>
              </div>
              <div class="progress-details">
                <h3>{{ item.title }}</h3>
                <p>{{ item.lastAccessed }}</p>
                <div class="mini-progress-bar">
                  <div 
                    class="mini-progress-fill" 
                    :style="{ width: item.progress + '%' }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 热门学习资源 -->
        <div class="popular-resources">
          <div class="section-header">
            <h2>热门学习资源</h2>
            <div class="sort-options">
              <label>排序方式：</label>
              <select v-model="sortBy" @change="updateFilteredResources">
                <option value="popularity">人气优先</option>
                <option value="rating">评分最高</option>
                <option value="newest">最新上传</option>
                <option value="duration">学习时长</option>
              </select>
            </div>
          </div>
          
          <!-- 资源列表 -->
          <div class="resource-list">
            <div 
              v-for="(resource, index) in filteredResources" 
              :key="resource.id"
              class="resource-item"
              @click="viewResource(resource.id)"
            >
              <div class="resource-image">
                <img :src="resource.image" :alt="resource.title" />
                <span v-if="resource.badge" class="resource-badge">{{ resource.badge }}</span>
                <span class="resource-duration">{{ formatDuration(resource.duration) }}</span>
              </div>
              <div class="resource-info">
                <div class="resource-tags">
                  <span v-for="(tag, tagIndex) in resource.tags.slice(0, 2)" :key="tagIndex" class="resource-tag">
                    {{ tag }}
                  </span>
                </div>
                <h3 class="resource-title">{{ resource.title }}</h3>
                <p class="resource-description">{{ resource.description }}</p>
                <div class="resource-meta">
                  <div class="meta-left">
                    <img :src="resource.authorAvatar" :alt="resource.author" class="author-avatar" />
                    <span class="author-name">{{ resource.author }}</span>
                  </div>
                  <div class="meta-right">
                    <span class="view-count">{{ formatNumber(resource.views) }} 次学习</span>
                    <div class="rating">
                      <i class="fas fa-star"></i>
                      <span>{{ resource.rating }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载更多 -->
          <div v-if="hasMoreResources" class="load-more">
            <button :disabled="loading" @click="loadMoreResources">
              {{ loading ? '加载中...' : '加载更多' }}
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 学习小贴士 -->
    <div class="study-tips">
      <h2>学习小贴士</h2>
      <div class="tips-list">
        <div v-for="(tip, index) in learningTips" :key="index" class="tip-item">
          <div class="tip-icon">{{ tip.icon }}</div>
          <div class="tip-content">
            <h3>{{ tip.title }}</h3>
            <p>{{ tip.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'StudyView',
  setup() {
    const router = useRouter()   
    // 搜索相关
    const searchQuery = ref('')
    const showSearchSuggestions = ref(false)
    const searchSuggestions = ['前端开发', 'Python入门', '英语学习', '日语五十音', '数据分析', '设计模式', '人工智能基础']
    const filteredSuggestions = ref([])
    
    // 筛选相关
    const activeCategory = ref('all')
    const selectedDifficulties = ref(['beginner', 'intermediate'])
    const durationFilter = ref(50)
    const sortBy = ref('popularity')
    
    // 加载状态
    const loading = ref(false)
    const hasMoreResources = ref(true)
    
    // 分类数据
    const categories = [
      { id: 'all', name: '全部分类', icon: '📚', count: 128 },
      { id: 'programming', name: '编程开发', icon: '💻', count: 42 },
      { id: 'language', name: '外语学习', icon: '🌐', count: 28 },
      { id: 'data', name: '数据分析', icon: '📊', count: 16 },
      { id: 'design', name: '设计创意', icon: '🎨', count: 14 },
      { id: 'exam', name: '考试资料', icon: '🎓', count: 18 },
      { id: 'business', name: '商业管理', icon: '💼', count: 10 },
    ]
    
    // 难度级别
    const difficultyLevels = [
      { value: 'beginner', name: '入门' },
      { value: 'intermediate', name: '中级' },
      { value: 'advanced', name: '高级' },
      { value: 'expert', name: '专家' },
    ]
    
    // 学习路径
    const learningPaths = [
      {
        id: 'path-1',
        title: '前端工程师成长路径',
        icon: '🚀',
        courses: 12,
        duration: 60,
        avgCompletion: 75,
        students: 5820,
        rating: 4.8,
      },
      {
        id: 'path-2',
        title: '数据科学家学习计划',
        icon: '📈',
        courses: 15,
        duration: 80,
        avgCompletion: 68,
        students: 3245,
        rating: 4.9,
      },
      {
        id: 'path-3',
        title: '日语能力考N2备考',
        icon: '🇯🇵',
        courses: 8,
        duration: 45,
        avgCompletion: 82,
        students: 7630,
        rating: 4.7,
      },
    ]
    
    // 用户学习进度
    const userProgress = [
      {
        id: 'course-1',
        title: 'Vue3从入门到精通',
        thumbnail: 'https://placehold.co/120x80/4169E1/FFFFFF?text=Vue3',
        progress: 65,
        lastAccessed: '昨天学习',
      },
      {
        id: 'course-2',
        title: 'Python数据分析与可视化',
        thumbnail: 'https://placehold.co/120x80/5F9EA0/FFFFFF?text=Python',
        progress: 32,
        lastAccessed: '3天前',
      },
    ]
    
    // 学习小贴士
    const learningTips = [
      {
        icon: '📝',
        title: '制定学习计划',
        description: '合理规划学习时间，设定明确目标，循序渐进地提升自己',
      },
      {
        icon: '🔄',
        title: '定期复习',
        description: '采用间隔重复法，定期回顾已学内容，巩固记忆',
      },
      {
        icon: '💬',
        title: '积极参与讨论',
        description: '加入学习社区，与同行交流，拓宽视野',
      },
      {
        icon: '🚀',
        title: '实践出真知',
        description: '将所学知识应用到实际项目中，加深理解',
      },
    ]
    
    // 学习资源数据
    const resources = [
      {
        id: 1,
        title: '前端开发入门到精通',
        description: '从零开始学习HTML、CSS、JavaScript，成为优秀的前端工程师',
        image: 'https://placehold.co/400x225/4169E1/FFFFFF?text=Web+Dev',
        views: 12580,
        rating: 4.8,
        duration: 42,
        difficulty: 'beginner',
        tags: ['前端', 'HTML', 'CSS', 'JavaScript'],
        author: '张老师',
        authorAvatar: '/src/assets/周杰伦.png',
        category: 'programming',
        badge: '畅销',
      },
      {
        id: 2,
        title: '英语听力提升训练',
        description: '通过日常对话练习，快速提升英语听力水平',
        image: 'https://placehold.co/400x225/4682B4/FFFFFF?text=English',
        views: 8930,
        rating: 4.6,
        duration: 30,
        difficulty: 'beginner',
        tags: ['英语', '听力', '口语'],
        author: '李老师',
        authorAvatar: '/src/assets/周杰伦.png',
        category: 'language',
      },
      {
        id: 3,
        title: '数据分析实战',
        description: '使用Python进行数据分析，掌握数据可视化技能',
        image: 'https://placehold.co/400x225/5F9EA0/FFFFFF?text=Data+Analysis',
        views: 6720,
        rating: 4.7,
        duration: 56,
        difficulty: 'intermediate',
        tags: ['Python', '数据分析', '可视化'],
        author: '王老师',
        authorAvatar: '/src/assets/悟空.jpg',
        category: 'data',
      },
      {
        id: 4,
        title: '日语五十音图快速记忆',
        description: '轻松掌握日语基础发音和书写',
        image: 'https://placehold.co/400x225/6495ED/FFFFFF?text=Japanese',
        views: 10240,
        rating: 4.9,
        duration: 15,
        difficulty: 'beginner',
        tags: ['日语', '五十音图', '入门'],
        author: '田中老师',
        authorAvatar: '/src/assets/悟空.jpg',
        category: 'language',
        badge: '新课',
      },
      {
        id: 5,
        title: 'Vue3进阶实战',
        description: '深入学习Vue3组合式API、响应式原理和性能优化',
        image: 'https://placehold.co/400x225/41B883/FFFFFF?text=Vue3',
        views: 8750,
        rating: 4.8,
        duration: 48,
        difficulty: 'intermediate',
        tags: ['Vue3', '前端', '框架'],
        author: '赵老师',
        authorAvatar: '/src/assets/周杰伦.png',
        category: 'programming',
      },
      {
        id: 6,
        title: 'Python机器学习入门',
        description: '学习机器学习基础算法，使用scikit-learn构建智能应用',
        image: 'https://placehold.co/400x225/3498DB/FFFFFF?text=ML',
        views: 7820,
        rating: 4.7,
        duration: 65,
        difficulty: 'intermediate',
        tags: ['Python', '机器学习', 'AI'],
        author: '陈老师',
        authorAvatar: '/src/assets/悟空.jpg',
        category: 'data',
      },
    ]
    
    // 计算属性：筛选后的资源
    const filteredResources = computed(() => {
      let result = [...resources]
      
      // 按分类筛选
      if (activeCategory.value !== 'all') {
        result = result.filter(resource => resource.category === activeCategory.value)
      }
      
      // 按难度筛选
      result = result.filter(resource => selectedDifficulties.value.includes(resource.difficulty))
      
      // 按学习时长筛选
      result = result.filter(resource => resource.duration <= durationFilter.value)
      
      // 按搜索词筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(resource => 
          resource.title.toLowerCase().includes(query) ||
          resource.description.toLowerCase().includes(query) ||
          resource.tags.some(tag => tag.toLowerCase().includes(query)),
        )
      }
      
      // 排序
      switch (sortBy.value) {
        case 'rating':
          result.sort((a, b) => b.rating - a.rating)
          break
        case 'newest':
          result.sort((a, b) => b.id - a.id)
          break
        case 'duration':
          result.sort((a, b) => a.duration - b.duration)
          break
        case 'popularity':
        default:
          result.sort((a, b) => b.views - a.views)
          break
      }
      
      return result
    })
    
    // 方法
    const handleSearchInput = () => {
      if (searchQuery.value) {
        filteredSuggestions.value = searchSuggestions.filter(suggestion => 
          suggestion.toLowerCase().includes(searchQuery.value.toLowerCase()),
        )
      } else {
        filteredSuggestions.value = []
      }
    }
    
    const handleSearchBlur = () => {
      setTimeout(() => {
        showSearchSuggestions.value = false
      }, 200)
    }
    
    const selectSuggestion = (suggestion) => {
      searchQuery.value = suggestion
      showSearchSuggestions.value = false
      performSearch()
    }
    
    const performSearch = () => {
      // 这里可以添加搜索逻辑
      console.log('Searching for:', searchQuery.value)
    }
    
    const selectCategory = (categoryId) => {
      activeCategory.value = categoryId
    }
    
    const updateFilteredResources = () => {
      // 触发计算属性更新
    }
    
    const resetFilters = () => {
      activeCategory.value = 'all'
      selectedDifficulties.value = ['beginner', 'intermediate']
      durationFilter.value = 50
      sortBy.value = 'popularity'
      searchQuery.value = ''
    }
    
    const navigateToPath = (pathId) => {
      router.push(`/study/path/${pathId}`)
    }
    
    const resumeLearning = (courseId) => {
      router.push(`/study/course/${courseId}/continue`)
    }
    
    const viewResource = (resourceId) => {
      router.push(`/study/resource/${resourceId}`)
    }
    
    const loadMoreResources = async () => {
      loading.value = true
      // 模拟加载延迟
      await new Promise(resolve => setTimeout(resolve, 1000))
      loading.value = false
      // 这里可以添加加载更多资源的逻辑
      hasMoreResources.value = false // 示例：假设没有更多资源了
    }
    
    const formatDuration = (hours) => {
      if (hours < 1) {
        return `${Math.round(hours * 60)}分钟`
      }
      return `${hours}小时`
    }
    
    const formatNumber = (num) => {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    }
    
    // 组件挂载时设置页面标题
    onMounted(() => {
      document.title = '学习资源中心 - 视界无界'
    })
    
    return {
      // 响应式数据
      searchQuery,
      showSearchSuggestions,
      filteredSuggestions,
      activeCategory,
      selectedDifficulties,
      durationFilter,
      sortBy,
      loading,
      hasMoreResources,
      categories,
      difficultyLevels,
      learningPaths,
      userProgress,
      learningTips,
      resources,
      filteredResources,
      
      // 方法
      handleSearchInput,
      handleSearchBlur,
      selectSuggestion,
      performSearch,
      selectCategory,
      updateFilteredResources,
      resetFilters,
      navigateToPath,
      resumeLearning,
      viewResource,
      loadMoreResources,
      formatDuration,
      formatNumber,
    }
  },
}
</script>

<style scoped>
/* 全局样式 */
.study-view {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 头部样式 */
.study-header {
  background: linear-gradient(135deg, #4169E1, #6495ED);
  color: white;
  padding: 60px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.study-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgba(255,255,255,0.1)" d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg>');
  background-size: 100px;
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.study-header h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.study-header p {
  font-size: 1.3rem;
  opacity: 0.95;
  margin-bottom: 30px;
}

/* 搜索框样式 */
.search-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  padding: 15px 50px 15px 20px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #ff6b6b;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: #ee5253;
  transform: translateY(-50%) scale(1.1);
}

/* 搜索建议样式 */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background-color: #f8f9fa;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  gap: 30px;
}

/* 侧边栏样式 */
.sidebar {
  width: 280px;
  flex-shrink: 0;
}

.filter-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-section h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-list li {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 5px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.filter-list li:hover {
  background-color: #f8f9fa;
}

.filter-list li.active {
  background-color: #e7f0ff;
  color: #4169E1;
  font-weight: 500;
}

.category-icon {
  font-size: 1.2rem;
  margin-right: 10px;
}

.category-name {
  flex: 1;
}

.category-count {
  font-size: 0.85rem;
  color: #888;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
}

.filter-list li.active .category-count {
  background-color: rgba(65, 105, 225, 0.2);
  color: #4169E1;
}

/* 难度选项样式 */
.difficulty-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.difficulty-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 0;
}

.difficulty-label input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

.difficulty-name {
  font-size: 0.95rem;
  color: #555;
}

/* 时长滑块样式 */
.duration-slider {
  margin: 20px 0;
}

.slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4169E1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(65, 105, 225, 0.3);
}

.duration-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.85rem;
  color: #888;
}

/* 重置按钮样式 */
.reset-filters {
  width: 100%;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px;
}

.reset-filters:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
}

/* 学习路径样式 */
.learning-paths {
  margin-bottom: 40px;
}

.learning-paths h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: 600;
}

.path-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.path-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.path-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.path-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.path-icon {
  font-size: 2rem;
  margin-right: 15px;
}

.path-info h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #333;
}

.path-info p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

.path-progress {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4169E1, #6495ED);
  border-radius: 3px;
  transition: width 1s ease;
}

.path-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #888;
}

/* 我的学习进度样式 */
.my-progress {
  margin-bottom: 40px;
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.my-progress h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: 600;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.progress-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.progress-item:hover {
  background: #e9ecef;
}

.progress-thumbnail {
  position: relative;
  width: 120px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 15px;
}

.progress-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 10px;
  font-size: 0.85rem;
  text-align: center;
}

.progress-details {
  flex: 1;
}

.progress-details h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: #333;
}

.progress-details p {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 8px;
}

.mini-progress-bar {
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: #4169E1;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* 热门资源样式 */
.popular-resources {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-header h2 {
  font-size: 1.8rem;
  color: #333;
  font-weight: 600;
  margin: 0;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: #666;
}

.sort-options select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sort-options select:hover {
  border-color: #4169E1;
}

/* 资源列表样式 */
.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
}

.resource-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.resource-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: #e7f0ff;
}

.resource-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.resource-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.resource-item:hover .resource-image img {
  transform: scale(1.05);
}

.resource-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff6b6b;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.resource-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.resource-info {
  padding: 20px;
}

.resource-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.resource-tag {
  background: #f0f4ff;
  color: #4169E1;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.resource-title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
  line-height: 1.4;
}

.resource-description {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 0.9rem;
  color: #555;
}

.meta-right {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.9rem;
  color: #888;
}

.view-count {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffb800;
}

.rating i {
  font-size: 0.9rem;
}

/* 加载更多按钮 */
.load-more {
  text-align: center;
  margin-top: 30px;
}

.load-more button {
  padding: 12px 30px;
  background: #4169E1;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more button:hover:not(:disabled) {
  background: #365ec9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}

.load-more button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 学习小贴士样式 */
.study-tips {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 30px 20px;
}

.study-tips h2 {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: #333;
  text-align: center;
  font-weight: 600;
}

.tips-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tip-item {
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.tip-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tip-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.tip-content h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #333;
  font-weight: 600;
}

.tip-content p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    position: relative;
  }
  
  .filter-section {
    margin-bottom: 15px;
  }
  
  .study-header h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .study-header {
    padding: 40px 15px;
  }
  
  .study-header h1 {
    font-size: 2rem;
  }
  
  .study-header p {
    font-size: 1.1rem;
  }
  
  .search-input {
    font-size: 14px;
    padding: 12px 45px 12px 15px;
  }
  
  .search-btn {
    width: 32px;
    height: 32px;
  }
  
  .main-content {
    padding: 20px 15px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .resource-list,
  .path-list,
  .tips-list {
    grid-template-columns: 1fr;
  }
  
  .resource-image {
    height: 180px;
  }
  
  .progress-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .progress-thumbnail {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .meta-right {
    gap: 10px;
  }
  
  .tip-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .tip-icon {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .study-header h1 {
    font-size: 1.8rem;
  }
  
  .study-header p {
    font-size: 1rem;
  }
  
  .resource-info {
    padding: 15px;
  }
  
  .resource-title {
    font-size: 1.15rem;
  }
  
  .meta-left {
    gap: 8px;
  }
  
  .author-name {
    font-size: 0.85rem;
  }
  
  .meta-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.85rem;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resource-item,
.path-card,
.tip-item {
  animation: fadeIn 0.5s ease-out;
}

.resource-item:nth-child(2) {
  animation-delay: 0.1s;
}

.resource-item:nth-child(3) {
  animation-delay: 0.2s;
}

.resource-item:nth-child(4) {
  animation-delay: 0.3s;
}
</style>